Producers of graphic content for display using a computer system want to create rich graphics which can be resized for different uses. For example, designers of user interfaces need to create graphic objects such as a button which can be selected using a mouse click. Such a button may be used in a number of situations and may be given different areas to fill in different layouts. However, while changing sizes, it is desirable for the button to retain certain properties, to enhance the user interface experience.
Bitmap objects are used to represent graphical objects. Bitmaps describe the objects by laying out a pattern of dots which represent the graphical information. When bitmaps are used, one method for resizing a bitmapped object is to magnify or reduce the entire object. This has numerous drawbacks. First, using simple reduction or magnification, the relative dimensions of the object will not change when using simple magnification or reduction. If an object drawn which is 50 pixels high by 100 pixels wide and rectangular in shape is resized so that the height is 100 pixels, the dimension of the resulting object will be 100 pixels by 200 pixels. If the magnification or reduction technique used allows different magnification or reduction in different dimensions, the relative dimensions need not remain fixed. However, in this case, writing on the object or other details of the object will be distorted. The bitmapped object may pixelate when viewed at a large size. For example, if the bitmap of the object is a pixel map when displayed at one size, and the object is displayed at a larger size, jaggedness and other artifacts may be viewable.
Anther method for resizing a bitmapped object is to divide the object into nine separate portions. This technique creates what is known as a “nine grid button.” The separation is performed by dividing the object with two horizontal and two vertical lines into nine areas. This is shown in FIGS. 1(a) and 1(b). In FIG. 1(a), object 1000 is pictured, divided into areas 1001 through 1009. Areas 1001, 1003, 1007, and 1009 are fixed. Thus, when the object is resized, as shown in FIG. 1(b), the size of these areas does not change. The heights of areas 1002 and 1008 are fixed, but their width changes, and the widths of areas 1004 and 1006 are fixed, but their height changes. The width and height of area 1005 both change. When an area is resized, the bitmap in the area is resized to fill the new size for that area.
There are a number of problems with this nine-grid bitmap technique. First, as before, the bitmaps used for the different areas may pixelate when viewed at high resolution. Second, the nine-grid bitmap technique restricts what regions can be scaled. Third, tiling bitmaps reduces the graphic appeal of the control.
Vector graphics can also be used to create graphic content. In vector graphics, instead of a bitmap, the graphical information is stored as geometrical formulas which represent images. Vector graphics images are more flexible than bitmaps because they can be resized and stretched without pixellation effects. Additionally, images stored as vectors look better on higher-resolution devices, whereas bitmapped images always appear the same regardless of a device's resolution. Vector graphics objects may also require less memory to store a representation of an image than bitmapped objects.
However, no existing tools allow vector graphics to be authored in a way which allows some parts of the image or some regions of the image to scale while others will remain fixed. In general, for user interfaces which use vector graphics to create elements of the display, a rectangular border which is rendered by default from the system is used. However, this is not flexible or visually appealing.
Thus, there is a need to enable flexible rendering of a vector graphic object where different elements or regions of the image will resize differently when the object is resized.